<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>网络摄像头</title>

	<style>
		table {
			border-collapse: collapse;
			width: 100%;
		}

		th,
		td {
			border: solid thin;
			text-align: center;
		}

		td>span {
			margin-right: 5px;
		}
	</style>

</head>

<body>

	<div id="vue-root">
		<input placeholder="请输入设备号" v-model="search.deviceNo">
		<button @click="getData">搜索</button>
		<select v-if="!xajyUser" v-model="xajy">
			<option :value="false">非校安家园</option>
			<option :value="true">校安家园</option>
		</select>
		<button @click="addDevice">添加设备</button>
		摄像头共{{count}}个

		<a href="/pc/logout">退出</a>

		<table>
			<thead>
				<tr>
					<th>用户</th>
					<th>设备号</th>
					<th>网络摄像头</th>
					<th>创建时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<template v-for="device in list">
					<tr v-for="(webcam,index) in device.webcams" :key="webcam.id">
						<template v-if="index==0">
							<td :rowspan="rowspan(device.webcams)">
								<div v-text="device.user"></div>
								<button @click="updateUser(device)">修改</button>
							</td>
							<td :rowspan="rowspan(device.webcams)">
								<div v-text="device.no"></div>
								<button @click="add(device.id)">添加摄像头</button>
							</td>
						</template>
						<td v-text="webcam.code"></td>
						<td v-text="createTime(webcam.id)"></td>
						<td>
							<template v-if="!xajyUser&&xajy">
								<input type="checkbox" :checked="webcam.paid" @input="toggle1(webcam)">
								<span>已收费</span>
							</template>

							<input type="checkbox" :checked="!webcam.disabled" @input="toggle(webcam)">
							<span>是否开启</span>
							<button @click="del(webcam.id)">删除</button>
						</td>
					</tr>
				</template>
			</tbody>

		</table>
	</div>

	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/scriptZIP/dayjs.min.js"></script>


	<script src="/js/common.js"></script>

	<script>
		var prefix = '/api/webcam';

		var app = new Vue({
			el: '#vue-root',
			data: {
				devices: [],
				search: {},
				xajy: true
			},
			created: function () {
				this.getData();
			},
			methods: {
				getData: function () {
					axios.get(prefix, {
						params: this.search
					}).then(function (res) {
						this.devices = res.data;
						this.devices.sort(function (a, b) {
							a = a.name;
							b = b.name;
							if (a == b) return 0;
							return a > b ? 1 : -1;
						});
					}.bind(this));
				},
				rowspan: function (list) {
					var len = list.length;
					return len == 1 ? null : len;
				},
				add: function (deviceId) {
					var code = prompt('请输入摄像头编号');
					axios.post(prefix, {
						deviceId: deviceId,
						code: code,
						disabled: false
					}).then(this.getData);
				},
				del: function (id) {
					if (!confirm('确认删除?')) return;
					axios.delete(prefix + '/' + id).then(this.getData);
				},
				toggle: function (webcam) {
					axios.post(prefix + '/' + webcam.id + '/' + !webcam.disabled).then(this.getData);
				},
				addDevice: function () {
					axios.post(prefix + '/device', {
						user: prompt('请输入用户') || '未命名用户',
						no: prompt('请输入设备号') || '未命名设备号'
					}).then(function (res) {
						this.add(res.data);
					}.bind(this));
				},
				updateUser: function (device) {
					var user = prompt('请输入用户');
					axios.put(prefix + '/device', {
						id: device.id,
						user: user
					}).then(function (res) {
						device.user = user;
					});
				},
				toggle1: function (webcam) {
					axios.put(prefix + '/' + webcam.id + '/' + webcam.paid).then(this.getData);
				},
				createTime: function (id) {
					return dayjs(id / 4096 + 1.56E12).format('YYYY-MM-DD HH:mm:ss');
				}
			},
			computed: {
				xajyUser: function () {
					return this.devices.every(function (it) {
						return it.xajy;
					});
				},
				list: function () {
					return this.devices.filter(function (it) {
						return it.xajy == this.xajy;
					}.bind(this));
				},
				count: function () {
					var set = {};
					this.list.forEach(function (it) {
						it.webcams.forEach(function (i) {
							set[i.code] = true;
						});
					});
					return Object.keys(set).length;
				}
			},
		});
	</script>

</body>

</html>